<template>
	<view class="my-layout">
		<view class="my-form">
			<u-form :model="form" ref="uForm" label-width="auto" :label-style="labelStyle">
				<u-form-item label="原登陆密码" prop="oldPwd">
					<u-input v-model="form.oldPwd" />
				</u-form-item>
				<u-form-item label="新登陆密码" prop="newPwd">
					<u-input v-model="form.newPwd" />
				</u-form-item>
				<u-form-item label="确认登陆密码" prop="confirmPwd">
					<u-input v-model="form.confirmPwd" />
				</u-form-item>
			</u-form>
		</view>
		<view class="btm-btn">
			<u-button type="warning" @tap='saveSet'>保存</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelStyle:{
					fontSize:'30rpx'
				},
				form: {
					oldPwd: '',
					newPwd: '',
					confirmPwd: ''
				},
				rules: {
					oldPwd: [{
						required: true,
						message: '请输入原登陆密码',
						trigger: 'blur,change'
					}],
					newPwd: [{
						required: true,
						message: '请输入新登陆密码',
						trigger: 'blur,change'
					}],
					confirmPwd: [{
						required: true,
						message: '请输入确认登陆密码',
						trigger: 'blur,change'
					}, {
						validator: (rule, value, callback) => {
							return this.form.newPwd === this.form.confirmPwd
						},
						message: '两次密码不同',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur']
					}],

				}
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			saveSet() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my-layout {
		border-top: 20rpx solid #F4F5F9;
	}

	.my-form {
		background-color: #FFFFFF;
		padding: 0 40rpx;
	}

	.btm-btn {
		padding: 60rpx 40rpx;
	}
</style>
